<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-16 15:32
  PageName：k_practice11_HSL.html
  Function：实战案例 - HSL
  URL：http://localhost:8080/e3_webpage_CSS3_TextStyle/k_practice11_HSL.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - HSL</title>

    <style type="text/css">
        table {
            border: solid1pxred;
            background: #eee;
            padding: 6px;
        }

        th {
            color: red;
            font-size: 12px;
            font-weight: normal;
        }

        td {
            width: 80px;
            height: 30px;
        }

        /*第1行*/
        tr:nth-child(4) td:nth-of-type(1) {background: hsl(0, 100%, 100%)}  /*第1列*/
        tr:nth-child(4) td:nth-of-type(2) {background: hsl(0, 75%, 100%);}  /*第2列*/
        tr:nth-child(4) td:nth-of-type(3) {background: hsl(0, 50%, 100%);}  /*第3列*/
        tr:nth-child(4) td:nth-of-type(4) {background: hsl(0, 25%, 100%);}  /*第4列*/
        tr:nth-child(4) td:nth-of-type(5) {background: hsl(0, 0%, 100%);}   /*第5列*/

        /*第2行*/
        tr:nth-child(5) td:nth-of-type(1) {background: hsl(0, 100%, 88%);}  /*第1列*/
        tr:nth-child(5) td:nth-of-type(2) {background: hsl(0, 75%, 88%);}   /*第2列*/
        tr:nth-child(5) td:nth-of-type(3) {background: hsl(0, 50%, 88%);}   /*第3列*/
        tr:nth-child(5) td:nth-of-type(4) {background: hsl(0, 25%, 88%);}   /*第4列*/
        tr:nth-child(5) td:nth-of-type(5) {background: hsl(0, 0%, 88%);}    /*第5列*/

        /*第3行*/
        tr:nth-child(6) td:nth-of-type(1) {background: hsl(0, 100%, 75%);}  /*第1列*/
        tr:nth-child(6) td:nth-of-type(2) {background: hsl(0, 75%, 75%);}   /*第2列*/
        tr:nth-child(6) td:nth-of-type(3) {background: hsl(0, 50%, 75%);}   /*第3列*/
        tr:nth-child(6) td:nth-of-type(4) {background: hsl(0, 25%, 75%);}   /*第4列*/
        tr:nth-child(6) td:nth-of-type(5) {background: hsl(0, 0%, 75%);}    /*第5列*/

        /*第4行*/
        tr:nth-child(7) td:nth-of-type(1) {background: hsl(0, 100%, 63%);}  /*第1列*/
        tr:nth-child(7) td:nth-of-type(2) {background: hsl(0, 75%, 63%);}   /*第2列*/
        tr:nth-child(7) td:nth-of-type(3) {background: hsl(0, 50%, 63%);}   /*第3列*/
        tr:nth-child(7) td:nth-of-type(4) {background: hsl(0, 25%, 63%);}   /*第4列*/
        tr:nth-child(7) td:nth-of-type(5) {background: hsl(0, 0%, 63%);}    /*第5列*/

        /*第5行*/
        tr:nth-child(8) td:nth-of-type(1) {background: hsl(0, 100%, 50%);}  /*第1列*/
        tr:nth-child(8) td:nth-of-type(2) {background: hsl(0, 75%, 50%);}   /*第2列*/
        tr:nth-child(8) td:nth-of-type(3) {background: hsl(0, 50%, 50%);}   /*第3列*/
        tr:nth-child(8) td:nth-of-type(4) {background: hsl(0, 25%, 50%);}   /*第4列*/
        tr:nth-child(8) td:nth-of-type(5) {background: hsl(0, 0%, 50%);}    /*第5列*/

        /*第6行*/
        tr:nth-child(9) td:nth-of-type(1) {background: hsl(0, 100%, 38%);}  /*第1列*/
        tr:nth-child(9) td:nth-of-type(2) {background: hsl(0, 75%, 38%);}   /*第2列*/
        tr:nth-child(9) td:nth-of-type(3) {background: hsl(0, 50%, 38%);}   /*第3列*/
        tr:nth-child(9) td:nth-of-type(4) {background: hsl(0, 25%, 38%);}   /*第4列*/
        tr:nth-child(9) td:nth-of-type(5) {background: hsl(0, 0%, 38%);}    /*第5列*/

        /*第7行*/
        tr:nth-child(10) td:nth-of-type(1) {background: hsl(0, 100%, 25%);}  /*第1列*/
        tr:nth-child(10) td:nth-of-type(2) {background: hsl(0, 75%, 25%);}   /*第2列*/
        tr:nth-child(10) td:nth-of-type(3) {background: hsl(0, 50%, 25%);}   /*第3列*/
        tr:nth-child(10) td:nth-of-type(4) {background: hsl(0, 25%, 25%);}   /*第4列*/
        tr:nth-child(10) td:nth-of-type(5) {background: hsl(0, 0%, 25%);}    /*第5列*/

        /*第8行*/
        tr:nth-child(11) td:nth-of-type(1) {background: hsl(0, 100%, 13%);}  /*第1列*/
        tr:nth-child(11) td:nth-of-type(2) {background: hsl(0, 75%, 13%);}   /*第2列*/
        tr:nth-child(11) td:nth-of-type(3) {background: hsl(0, 50%, 13%);}   /*第3列*/
        tr:nth-child(11) td:nth-of-type(4) {background: hsl(0, 25%, 13%);}   /*第4列*/
        tr:nth-child(11) td:nth-of-type(5) {background: hsl(0, 0%, 13%);}    /*第5列*/

        /*第9行*/
        tr:nth-child(12) td:nth-of-type(1) {background: hsl(0, 100%, 0%);}  /*第1列*/
        tr:nth-child(12) td:nth-of-type(2) {background: hsl(0, 75%, 0%);}   /*第2列*/
        tr:nth-child(12) td:nth-of-type(3) {background: hsl(0, 50%, 0%);}   /*第3列*/
        tr:nth-child(12) td:nth-of-type(4) {background: hsl(0, 25%, 0%);}   /*第4列*/
        tr:nth-child(12) td:nth-of-type(5) {background: hsl(0, 0%, 0%);}    /*第5列*/
    </style>
</head>

<body>
<table class="hslexample">
    <tbody>
    <tr>
        <th>&nbsp;</th>
        <th colspan="5">色相：H=0 Red</th>
    </tr>

    <tr>
        <th>&nbsp;</th>
        <th colspan="5">饱和度 (&rarr;)</th>
    </tr>

    <tr>
        <th>亮度 (&darr;)</th>
        <th>100%</th>
        <th>75%</th>
        <th>50%</th>
        <th>25%</th>
        <th>0%</th>
    </tr>

    <tr><th>100</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><th>88</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><th>75</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><th>63</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><th>50</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><th>38</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><th>25</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><th>13</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><th>0</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    </tbody>
</table>
</body>
</html>